<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Language" content="en-us">
	<title>Xtext-Web State Machine Example</title>
	<link rel="stylesheet" type="text/css" href="webjars/codemirror/5.41.0/lib/codemirror.css" />
	<link rel="stylesheet" type="text/css" href="webjars/codemirror/5.41.0/addon/hint/show-hint.css" />
	<link rel="stylesheet" type="text/css" href="xtext/@xtext-version-placeholder@/xtext-codemirror.css" />
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script src="webjars/requirejs/2.3.6/require.min.js"></script>
	<script type="text/javascript">
		var baseUrl = window.location.pathname;
		var fileIndex = baseUrl.indexOf("codemirror-statemachine-resource.html");
		if (fileIndex > 0)
			baseUrl = baseUrl.slice(0, fileIndex)
		require.config({
			baseUrl: baseUrl,
			paths: {
				"jquery": "webjars/jquery/3.6.0/jquery.min",
				"xtext/xtext-codemirror": "xtext/@xtext-version-placeholder@/xtext-codemirror",
			},
			packages: [{
				name: "codemirror",
				location: "webjars/codemirror/5.41.0",
				main: "lib/codemirror"
			}]
		});
		require(["xtext/cm-mode-statemachine", "xtext/xtext-codemirror"], function(mode, xtext) {
			var editor = xtext.createEditor({baseUrl: baseUrl,});
			$("#save-button").click(function() {
				editor.xtextServices.saveResource();
			});
			$("#revert-button").click(function() {
				editor.xtextServices.revertResource();
			});
			$("#generate-button").click(function() {
				window.open('http://' + location.host + baseUrl + 'xtext-service/generate?resource=' + editor.xtextServices.options.resourceId);
			});
			$("#change-resource").change(function() {
				var resourceId = $("#change-resource option:selected").attr("value");
				editor.xtextServices.serviceBuilder.changeResource(resourceId);
			});
			$("#disable-button").click(function() {
				xtext.removeServices(editor);
			});
		});
	</script>
</head>
<body>

<div class="container">
	<div id="xtext-editor"
		data-editor-resource-id="example1.statemachine"
		data-editor-dirty-element="dirty-indicator"
		data-editor-enable-save-action="true"
		data-editor-enable-formatting-action="true"
		data-editor-show-error-dialogs="true"></div>
	<div class="status-wrapper">
		<div id="dirty-indicator">modified</div>
		<div id="status">Welcome to Xtext-Web</div>
	</div>
	<div class="button-wrapper">
		<button id="save-button">Save</button>
		<button id="revert-button">Revert</button>
		<button id="generate-button">Generate</button>
		<select id="change-resource">
			<option value="example1.statemachine">Example 1</option>
			<option value="example2.statemachine">Example 2</option>
		</select>
		<button id="disable-button">Disable</button>
	</div>
</div>

</body>
</html>
